<template>
  <div class="w-800px mx-auto h-full flex-col">
    <div class="flex w-full gap-12px flex-none">
      <n-select v-model:value="modelName" :options="modelList"></n-select>
      <n-button @click="handleAddChat">新建聊天</n-button>
    </div>
    <template v-if="chatStore.currentChat">
      <n-list class="flex-1">
        <n-list-item v-for="(msg, index) in chatStore.currentChat?.messages" :key="index">
          <div>{{ msg.answer }}</div>
          <div>{{ msg.think }}</div>
          <div>{{ msg.answer }}</div>
        </n-list-item>
      </n-list>
      <div class="flex-center gap-12px">
        <n-input
          v-model:value="question"
          type="textarea"
          :autosize="{
            minRows: 3,
            maxRos: 10,
          }"
        ></n-input>
        <n-button type="primary" class="h-full flex-none" @click="handleQuestion">发送</n-button>
      </div>
    </template>
  </div>
</template>
<script lang="ts" setup>
import { useChatStore, type IChatMessage } from '@/stores/chat'
import { useMessage } from 'naive-ui'
import type { SelectOption } from 'naive-ui'
import ollama, { Ollama } from 'ollama'
import { onMounted, ref } from 'vue'
defineOptions({ name: 'ChatView' })
const chatStore = useChatStore()
const message = useMessage()
const modelName = ref('')
const modelList = ref<SelectOption[]>([])
const getModelList = async () => {
  try {
    const { models } = await ollama.list()
    modelList.value = models.map((el) => ({ label: el.name, value: el.name }))
    console.log('🚀 ~ getModelList ~ models:', models)
  } catch (error) {
    message.error('获取模型列表失败，请检查ollama服务是否已启动')
  }
}
onMounted(() => {
  getModelList()
})

const handleAddChat = () => {
  if (!modelName.value) {
    message.error('请选择模型')
    return
  }
  chatStore.addChat(modelName.value)
}

const question = ref('')
const handleQuestion = () => {
  chatStore.sendQuestion(question.value)
  question.value = ''
}
</script>
<style lang="scss"></style>
